[자바스크립트] iframe 태그에 접근해 문서 객체 DOM 요소 접근

iframe 태그를 이용해 외부 도메인 또는 URL 주소의 내용을 자신의 웹사이트에 보여주는 경우 ... 때때로 iframe의 DOM 영역에 접근할 필요가 있습니다. 이때 어떻게하면 가능한지 알아봅니다.

# 자바스크립트 iframe 요소의 DOM에 접근하기

iframe 태그의 DOM객체에 접근하기 위해서는 iframe 요소의 contentWindow 또는 contentDocument를 사용하여 가능합니다.  해당 속성은 iframe에 적용된 document객체를 반환합니다.

이제 iframe 내부의 document 문서를 조작하거나 정보를 가져올 수 있게되었습니다. 만약 동작하지 않는 경우라면 아래 사항을 확인해보세요.

! Cross Origin 정책 확인하기

보안에 따른 이슈로 동일출처정책(CORS)을 따르지 않는 경우 위 프로퍼티는 에러를 출력하거나 아무것도 반환하지 않습니다. 이는 보안에 따른 정책으로 동일한 호스트를 가져야만 정상적으로 출력하니 꼭 알아두시기 바랍니다.

# iframe DOM 접근하기 예제

예를들어 아래와 같이 iframe 태그가 있는 경우 접근하여  DOM 정보를 얻는 방법입니다. 아래에서는 body 요소를 가져와 변수에 저장하였습니다.

이처럼 iframe 내부의 원하는 요소를 쉽게 가져올 수 있습니다.

# iframe 크로스 도메인(Cross Domain) 방법

만약 도메인이 서로 다른 경우 어떤 방법이 있을까요? 물론 Document 전체를 가져오거나 조작하는 것은 어렵습니다. 하지만 필요한 정보를 가져오는 것은 가능한데 이 방법에 대하여 알아봅니다.

! 비동기식 Ajax 사용하기

비동기 방식으로 해당 url에 접근하는 방법을 생각할 수 있습니다. iframe의 url을 ajax로 콜하여 정보를 얻은 후 필요한 스크립트를 수행하는 방법입니다. 이 방법은 iframe 내부에 요소을 조작하는 것은 안되지만 해당 url의 문서 정보들을 알아야하거나 문서의 높이등을 얻어 올 수 있습니다. 이 방법을 사용하여 autoHeight 변수를 만들 수도 있는데 iframe 내부 document 높이를 구해서 현재 iframe의 높이에 적용할 경우를 생각해볼 수 있죠.